<template>
  <div o-Container>
    <div class="top_box">
      <div class="search_box">
        <img
          src="/static/skin/herodoo/main/platform/home/img/search.png"
          alt=""
        />
        <input
          :value="searchValue"
          type="text"
          placeholder="请输入搜索内容"
          @keydown.enter="searchEnterKeyPress"
          @blur="searchEnterKeyPress"
        />
      </div>
    </div>
    <o-list v-bind:source="list.contract">
      <template slot="config" slot-scope="scope">
        <div class="img_box">
          <img
            @click="look(scope)"
            src="/static/skin/default/MCS/AIGC/Inventory/images/chakan.png"
            alt=""
          />
        </div>
      </template>
    </o-list>
    <UserMedalView ref="userMedalView"></UserMedalView>
  </div>
</template>

<script>
import UserMedalView from "../Components/UserMedalView.vue";
export default {
  components: {
    UserMedalView
  },
  name:
    "mms_platform_company_list" /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */,
  data() {
    return {
      octopus: this.$parent.octopus,
      list: {
        contract: {
          data: {
            id: 1312, // 菜单表的八爪鱼ID
            cellData: [
              { name: "NickName", searchKey: "like", searchValue: "" }, // 名称
              { name: "Mobile" }, // 联系方式
              { name: "Age" }, // 年龄
              { name: "Sex" }, // 性别
              { name: "ID", show: false }, // ID
              { name: "UserBadgeQuantity" } // 获取数量
            ],
            paramData: {}
          },
          configWidth: 30,
          showNumber: true
        }
      },
      searchValue: ''
    };
  },
  created() {},
  methods: {
    look(row) {
      this.$refs.userMedalView.drawerOpen(row.data.row, "look");
    },
    reload() {
      this.list.contract.control.load();
    },
    searchEnterKeyPress() {
        this.list.contract.data.cellData[0].NickName = this.searchValue;
        this.list.contract.control.load();
    }
  },
  props: ["oData"]
};
</script>
<style scoped>
.top_box {
  width: 100%;
  height: 5.3rem;
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-bottom: 1.2rem;
  box-sizing: border-box;
}

.top_box .search_box {
  width: 32rem;
  height: 100%;
  border: 1px solid #f0f0f0;
  border-radius: 4rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.8rem;
  box-sizing: border-box;
}

.top_box .search_box input {
  border: none;
  outline: none;
  width: 70%;
}

.top_box .search_box img {
  cursor: pointer;
}

.top_box .button_box button {
  width: 15rem;
  height: 100%;
  border-radius: 4rem;
  border: none;
  color: #fff;
  background-color: #f78c52;
  box-shadow: 0px -3px 4px 0px rgba(204, 190, 186, 0.4);
  font-size: 1.7rem;
  cursor: pointer;
}

.top_box .button_box button {
  margin-right: 1.3rem;
}

.el-message-box {
  background-color: #fff !important;
}

.img_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.img_box img {
  width: 25px;
  cursor: pointer;
}

.disable {
  cursor: not-allowed;
  opacity: 0.5;
}

>>> .Content {
  height: 84vh !important;
}
</style>
